<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            [nzCollapsed]="isCollapsed$ | async"
            nzWidth="256px"
            nzCollapsible="true"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>Ant Design Of Angular</h1>
      </a>
    </div>
    <ul [nzInlineCollapsed]="isCollapsed$ | async" nz-menu nzMode="inline" nzTheme="dark">
      <li nz-submenu nzIcon="appstore" nzOpen nzTitle="应用">
        <ul>
          <li *ngFor="let item of (list$|async)||[]" nz-menu-item nzMatchRouter>
            <a [routerLink]="'demo/'+item.code">{{item.name}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span (click)="changeCollapsed()" class="header-trigger">
            <span class="trigger"
                  nz-icon
                  [nzType]="(isCollapsed$|async) ? 'menu-unfold' : 'menu-fold'"
            ></span>
        </span>
        <div class="setting-btn menu-btn">
          <button nz-button nzType="primary" routerLink="/menuList">菜单</button>
        </div>
        <div class="setting-btn">
          <button nz-button nzType="primary" routerLink="/setting">设置</button>
        </div>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer>
      <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备19020820号-3</a>
    </nz-footer>
  </nz-layout>
</nz-layout>
